<template>
	<view>
		<uNavbar title="商城" leftIconColor="#E0DDDA"></uNavbar>
		<view class="search flex_dq">
			<image src="../../static/icon/i_ss.png" mode=""></image>
			<input type="text" placeholder-style="font-size:14px" v-model.trim="search" placeholder="请输入商品名称"
				@confirm="isSearch" />
		</view>
		<!-- 轮播 -->
		<view class="brand_island_a">
			<swiper class="swiper_a" keyName="image_path" circular interval="3000" duration="500" previous-margin="10px"
				next-margin="20px">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper_box_a flex_c" @click="changeUrl(item.url)">
						<image :src="item.image_path" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="noticeBar">
			<u-notice-bar :text="shopTips" bgColor="#29294C" fontSize="14" color="#666666"></u-notice-bar>
		</view>
		<view class="metal flex_spa">
			<view class="metal_box  shop1 " data-url="/pagesMy/shoppingCenter/shoppingGiftBox" @click="allJump">
				<text>购物送宝箱</text>
				<view class="metal_d  flex_ld">
					<text>购物送宝箱</text>
					<uni-icons type="right" color="#A68A64" size="18"></uni-icons>
				</view>
			</view>
			<view class="metal_box shop2 " data-url="/pagesMy/shoppingCenter/shoppingGiftBoxTwo?state=2" @click="allJump">
				<text>孵化品牌区</text>
				<view class="metal_d  flex_ld">
					<text>持权益卡享折扣</text>
					<uni-icons type="right" color="#A68A64" size="18"></uni-icons>
				</view>
			</view>
			<view class="metal_box shop3 " data-url="/pagesMy/shoppingCenter/shoppingGiftBoxTwo?state=4" @click="allJump">
				<text>DAO贡献区</text>
				<view class="metal_d  flex_ld">
					<text>买商品得贡献</text>
					<uni-icons type="right" color="#A68A64" size="18"></uni-icons>
				</view>
			</view>
			<view class="metal_box shop3 " data-url="/pagesMy/shoppingCenter/shoppingGiftBoxTwo?state=5" @click="allJump">
				<text>购物送元宝</text>
				<view class="metal_d  flex_ld">
					<text>特惠来袭</text>
					<uni-icons type="right" color="#A68A64" size="18"></uni-icons>
				</view>
			</view>
		</view>

		<view class="shopp">
			<view class="regional flex_dq">
				<text class="regional_name_a ">王朝甄选</text>
				<text class="bg_circular_a"></text>
			</view>
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in productList" :key="index"
					@click="goDetails(item.id)">
					<image :src="item.images" mode="aspectFill"></image>
					<text>{{item.name}}</text>
					<view class="gives flex_c" v-if="item.type ==5">
						<text class="">赠送</text>
						<image class="gives_img" src="../../static/image/fhyb.png" mode=""></image>
						<text>{{item.balance_hf ||0}}</text>
					</view>
					<view class="sign_box ">
						<view class="money_a flex_dq">
							<text class="fracture_txt" v-if="item.discount">折</text>
							<image v-if="item.is_hold" src="../../static/icon/i_vip.png" mode=""></image>
							<text>￥{{item.present_price}}</text>
							<text v-if="item.hasoption" style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
						<view class="fracture flex_dq" v-if="item.discount">
							<text>￥{{item.discount_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="productList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {sliderList} from "../../api/store.js";
	import {shopGoods,shopGoodsConfig} from "../../api/shopp.js";
	import {config} from "../../api/shopp.js";
	export default {
		data() {
			return {
				search: '',
				shopTips: '',
				page: 1,
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				bannerList: [], //轮播图
				productList: [],
			}
		},
		onLoad() {
			this.initIndex()
			this.isConfig()
		},
		onShow() {
			if (this.status != 'nomore') {
				this.page = 1
				this.productList = []
				this.initList()
			}
		},
		methods: {
			isConfig() {
				config({}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.shopTips = res.data.shop_goods_value
					}
				})
			},
			// 统一跳转
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},

			// 轮播、列表 集成接口
			initIndex() {
				let data = {
					type: 4
				}
				sliderList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.bannerList = res.data
					}
				})
			},
			// 跳转页面
			changeUrl(url) {
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if (domain != -1) {
					var path = url.split('#');
					console.log('1111', path[1])
					let urls = path[1]
					uni.navigateTo({
						url: urls
					})
				}
			},
			// 去详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/shopDetails?id=' + id
				})
			},
			// 初始化列表
			initList() {
				let data = {
					page: this.page,
					search_name: this.search,
					cateogry_id: '',
					is_recommend: '',
				}
				shopGoods(data).then(res => {
					console.log('11111', res)
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page == 1 ? list : this.productList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			isSearch() {
				this.page = 1
				this.productList = []
				this.initList()
			}

		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
					that.page = 1,
					that.search = '',
					that.productList = [],
					that.initIndex()
				that.isConfig()
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		background: #ffffff;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}

	.search>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 40rpx 0 26rpx;
	}

	.search::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 80rpx;
		transform: translateX(-50%);
		height: 36rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.search>input {
		color: #666666;
		font-size: 28rpx;
	}

	.brand_island_a {
		width: 100%;
		height: 308rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		// transform: translateY(-70rpx);
	}

	.swiper_a {
		width: 750rpx;
		height: 306rpx;
	}

	.swiper_box_a {
		position: relative;
		width: 670rpx;
		height: 310rpx;
		text-align: center;
		background: #00000025;
		border-radius: 30rpx;
		margin: 0 20rpx;
	}

	.swiper_box_a>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 30rpx;
	}

	.tips {
		width: 92%;
		font-size: 30rpx;
		background: #F2F2F2;
		color: #A68A64;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		margin: 0 auto;
	}

	.noticeBar {
		position: relative;
		width: 100%;
		margin-top: 30rpx;
	}

	.metal {
		width: 92%;
		margin: 30rpx auto;
	}

	.metal_box {
		display: flex;
		flex-direction:column;
		justify-content: center;
		width: 320rpx;
		height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.metal_box>text {
		font-size: 32rpx;
		color: #3D3D3D;
		margin-left: 10rpx;
	}

	.metal_d {
		padding: 8rpx 10rpx;
	}

	.metal_d>text {
		font-size: 24rpx;
		color: #858585;
	}

	.shop1 {
		background: url(../../static/image/shop1.png);
		background-size: 100% 100%;
	}

	.shop2 {
		background: url(../../static/image/shop2.png);
		background-size: 100% 100%;
	}
	.shop3 {
		background: url(../../static/image/shop3.png);
		background-size: 100% 100%;
	}

	.shopp {
		width: 92%;
		margin: 50rpx auto 30rpx;
		/* background: pink; */
	}

	.regional {
		position: relative;
		font-family: iconfont2;
		font-size: 44rpx;
		color: #262626;
	}

	.regional_name {
		z-index: 8;
	}

	.regional_name_a {
		z-index: 8;
	}

	.bg_circular {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.bg_circular_a {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.commodity_box {
		width: 92%;
		margin: 50rpx auto 30rpx;
		position: relative;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 50rpx;
	}

	.commodity {
		z-index: 9;
	}

	.commodity_sell {
		position: relative;
		width: 330rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 330rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.gives{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background: #00000080 !important;
		font-size: 20rpx !important;
		color: #ffffff !important;
		text-align: center;
		padding: 10rpx 10rpx;
		border-radius: 0 20rpx 0 0;
		z-index: 10;
	}
	.gives_img{
		width: 26rpx;
		height: 18rpx;
		margin: 0 4rpx;
	}
	.money_a {
		color: #3D3D3D;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}

	.money_a>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.fracture_txt{
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: #A68A64;
		border-radius:  10rpx;
		color: #ffffff;
		font-size: 24rpx;
		background: #A68A64;
		padding: 4rpx 6rpx;
	}
	.fracture{
		font-size: 24rpx;
		color: #999999;
		text-decoration-line: line-through;
	}

	.sign_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 10rpx;
	}

	/deep/.u-notice-bar {
		background: #BA9B7020 !important;
	}
</style>